3D Transformacije

⬅ Povratak na početnu

rotateX()

Rotira element oko horizontalne X osi. Efekt "prevrtanja prema/od gledatelja".

transform: rotateX(45deg)

rotateY()

Rotira element oko vertikalne Y osi. Klasičan efekt "okretanja kartice".

transform: rotateY(45deg)

rotateZ()

Rotira element oko Z osi (dubina). Identično 2D rotate() funkciji.

transform: rotateZ(45deg)

rotate3d()

Rotira element oko prilagođene osi definirane vektorom (x, y, z) za zadani kut.

transform: rotate3d(1, 1, 0, 45deg)

translateZ()

Pomiče element po Z osi — prema ili od gledatelja. Zahtijeva perspective.

transform: translateZ(60px)

translate3d()

Pomiče element po sve tri osi odjednom: X, Y i Z.

transform: translate3d(30px, 20px, 40px)

scaleZ()

Skalira element duž Z osi. Vidljiv efekt nastaje u kombinaciji s rotacijom.

transform: scaleZ(2) rotateX(45deg)

scale3d()

Skalira element po sve tri osi odjednom. Kombinira scaleX, scaleY i scaleZ.

transform: scale3d(1.4, 0.7, 1)

matrix3d()

Kombinira sve 3D transformacije u jednu 4×4 matricu od 16 vrijednosti. Ekstremno moćan ali rijetko pisan ručno — obično ga generiraju alati ili JavaScript.

transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 20,10,30,1)